<template>
	<gui-popup ref="guipopup1">
		<view class="gui-relative">
			<view class="title f30 c000 gui-bold">
				选择采购单
			</view>
			<view class="row row_input c000 f22">
				<view class="gui-icons m_color searc_icon">&#xe604;</view>
				<input type="text" class="gui-flex1 f22" v-model="query.id" @confirm="search" placeholder="请输入采购单编号" />
				<view class="s_txt m_color f24" @click="search">
					| 搜索
				</view>
			</view>
			<view class="studetn_list">
				<view class="msg f22">
					搜索到以下采购单
				</view>
				<scroll-view :scroll-y="true" @scrolltolower="loadmorefun" style="height: 200rpx;margin-top: 20rpx;">
					<view class="s_item gui-flex gui-align-items-center gui-space-between"
						v-for="(item,index) in dataList" @click="selectFun(item)">
						<view class="gui-flex gui-flex1">
							<view class="name qoverDot">
								{{item.id}}
							</view>
							<view class="right_id">
								{{item.statusName}}
							</view>
						</view>
						<view class="">
							<image class="raido_img" v-if="checkData.id == item.id" src="@/static/radio_check.png"
								mode="widthFix"></image>
						</view>
					</view>
					<!-- 加载组件 -->
					<gui-loadmore ref="loadmorecom"></gui-loadmore>
				</scroll-view>
			</view>
			<view style="height: 100rpx;">

			</view>
			<view class="footer_box gui-flex">
				<view class="btn_tool border" @tap.stop="close">
					取消
				</view>
				<view class="btn_tool noborder" @tap.stop="confrim">
					确定
				</view>
			</view>
			<!-- 关闭按钮 -->
			<text class="gui-block c999 demo-close gui-icons gui-absolute-rt" @tap.stop="close">&#xe78a;</text>
		</view>
	</gui-popup>
</template>

<script>
	export default {
		name: "bai-creatTrainee",
		data() {
			return {
				checkData: {
					userId: ''
				},
				query: { //公用查询
					pageNum: 1,
					pageSize: 20,
					id: ''
				},
				apiLoadingStatus: false, //加载
				dataList: [], //数据
				noData: false, //是否无数据
			};
		},
		created() {
			this.getData();
		},
		methods: {
			//01 居中弹出
			open: function() {
				this.$refs.guipopup1.open();
			},
			close: function() {
				this.$refs.guipopup1.close();
			},
			selectFun(item) {
				this.checkData = item;
				console.log(item);
			},
			confrim() {
				if (!this.checkData.userId) {
					this.$u.msg('请选择从业人员')
					return;
				}
				this.close();
				this.$emit('change', this.checkData);
			},
			// 加载更多事件
			loadmorefun: function() {
				if (this.apiLoadingStatus) {
					return;
				}
				// 获取加载组件状态看一下是否还能继续加载
				if (this.$refs.loadmorecom.loadMoreStatus != 0) {
					return;
				}
				// 保证触底只执行一次加载
				if (this.loadMoreTimer != null) {
					clearTimeout(this.loadMoreTimer);
				}
				this.loadMoreTimer = setTimeout(() => {
					this.$refs.loadmorecom.loading();
					// 此处开启加载动画执行加载数据的函数
					this.getData();
				}, 80);
			},
			search() {
				console.log("===========");
				this.query.pageNum = 1;
				this.getData();
			},
			getData: function(isReload) { //获取列表数据
				// this.dataList = []
				this.apiLoadingStatus = true;
				console.log('加载函数运行，页码 : ' + this.query.pageNum);
				this.$http.get(`/material/purchaseOrder/list`, {
					pageNum: this.query.pageNum,
					pageSize: this.query.pageSize,
					id: this.query.id
				}).then(res => {
					let result = res.rows
					this.totalPage = Math.ceil(res.total / this.query.pageSize);
					if (this.query.pageNum >= 2) {
						this.dataList = this.dataList.concat(result);
						// 加载完成后停止加载动画
						this.$refs.loadmorecom.stoploadmore();
						// 假定加载了全部数据，通知组件不再加载更多
						if (this.query.pageNum >= this.totalPage) {
							this.$refs.loadmorecom.nomore();
						}
					}
					// 第一页 有可能是第一次加载或者刷新
					else {
						this.dataList = [];
						this.dataList = result;
						this.noData = result.length ? false : true;
						if (this.query.pageNum >= this.totalPage) {
							this.$refs.loadmorecom.nomore();
						}
					}
					this.query.pageNum++;
					this.apiLoadingStatus = false;
				})
			},
		}
	}
</script>

<style scoped>
	.gui-relative {
		position: relative;
		width: 548rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 40rpx;
		box-sizing: border-box;
	}

	.title {
		width: 100%;
		text-align: center;
		margin-bottom: 34rpx;
	}

	.demo-close {
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		opacity: 0.88;
		text-align: center;
		font-size: 48rpx;
	}

	.row {
		margin-bottom: 20rpx;
	}

	.row_input {
		width: 459rpx;
		height: 67rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 1px solid #CCCCCC;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.uni-input {
		padding-left: 20rpx;
	}

	.searc_icon {
		width: 40rpx;
	}

	.time_select {
		width: 140rpx;
		height: 67rpx;
		background: #FFFFFF;
		border: 1rpx solid #CCCCCC;
		border-radius: 10rpx;
		font-size: 24rpx;
		text-align: center;
		line-height: 67rpx;
	}

	.s_item {
		width: 100%;
		height: 67rpx;
		background: #FFFFFF;
		border: 1px solid #CCCCCC;
		padding: 0 27rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		margin-bottom: 10rpx;
	}

	.s_item .name {
		width: 250rpx;

	}

	.studetn_list {
		margin: 20rpx 0;
	}

	.text_area {
		width: 100%;
		padding: 14rpx 26rpx;
		box-sizing: border-box;
		background: #F5F5F5;
		border-radius: 10rpx;
		border: 1px solid #CCCCCC;
		max-height: 200rpx;
	}

	.footer_box {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		align-items: center;
		padding: 0 36rpx;
		box-sizing: border-box;
		height: 120rpx;
		width: 100%;
		justify-content: space-between;
	}

	.footer_box .btn_tool {
		width: 219rpx;
		height: 63rpx;
		background: #FFFFFF;
		border-radius: 60rpx;
		text-align: center;
		line-height: 63rpx;
		font-size: 22rpx;
	}

	.footer_box .border {
		border: 1px solid #0087FF;
		color: #0087FF;
	}

	.footer_box .noborder {
		background: linear-gradient(225deg, #1890FF 0%, #25B6E3 100%);
		color: #ffffff;
	}

	.raido_img {
		width: 20rpx;
		height: 20rpx;
	}
</style>